<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      title="审核"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRef"
        label-width="110px"
      >
        <div style="margin-left: 40px">
          订单：<span style="color: #169bd5">{{ orderInfo.code }}</span
          >，提成金额：<span style="color: #ff6600">{{ orderInfo.fee }}</span
          >。
        </div>
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="1">审核通过</el-radio>
            <el-radio label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="审批意见"
          prop="remark"
          :rules="
            form.status == 2
              ? [
                  {
                    required: true,
                    message: '请输入不通过原因',
                    trigger: 'blur'
                  }
                ]
              : []
          "
          v-show="form.status == 2"
        >
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="审核不通过时必填"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          class="theme-background-color"
          @click="saveData"
          :disabled="isDisabled"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    examinePromotionOrderDialogVisible: {
      type: Boolean,
      default: function () {
        return {}
      }
    },
    orderId: {
      type: [Number, String],
      default: function () {
        return {}
      }
    },
    orderInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      products: [],
      providers: [],
      form: {
        status: '1',
        remark: '',
        id: ''
      },
      formRules: {
        status: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      isDisabled: false
    }
  },
  created() {},
  methods: {
    // 左上角关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:examinePromotionOrderDialogVisible', false)
          done()
        })
        .catch((_) => {})
    },
    // 取消按钮
    closeDialog() {
      this.$emit('update:examinePromotionOrderDialogVisible', false)
    },
    // 保存按钮
    async saveData() {
      this.form.id = this.orderId
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return
        this.isDisabled = true
        const { data: res } = await this.$http.post(
          '/admin/spread_order/audit',
          this.form
        )
        this.isDisabled = false
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success('审核成功')
        this.visible = false
        this.$emit('update:examinePromotionOrderDialogVisible', false)
        parent.location.reload()
      })
    }
  },
  watch: {
    examinePromotionOrderDialogVisible() {
      this.visible = this.examinePromotionOrderDialogVisible
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 80%;
  margin-left: 15px;
  .el-select {
    width: 100%;
  }
}
</style>
